<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />

    <title>Flexbox: task 4</title>

    <link rel="stylesheet" href="../styles.css" />

    <style>
        ul {
            width: 450px;
            list-style: none;
            padding: 0;
            margin: 0;
        }

        li {
            background-color: #4d7298;
            border: 2px solid #77a6b6;
            border-radius: 0.5em;
            color: #fff;
            padding: 0.5em;
            margin: 0.5em;
        }
    </style>

    <style class="editable">
        ul {
        }

        li {
        }
    </style>
</head>

<body>
<section class="preview">
    <ul>
        <li>Turnip</li>
        <li>greens</li>
        <li>yarrow</li>
        <li>ricebean</li>
        <li>rutabaga</li>
        <li>endive</li>
        <li>cauliflower</li>
        <li>sea lettuce</li>
        <li>kohlrabi</li>
        <li>amaranth</li>
    </ul>
</section>
<ul>
  <li>Turnip</li>
  <li>greens</li>
  <li>yarrow</li>
  <li>ricebean</li>
  <li>rutabaga</li>
  <li>endive</li>
  <li>cauliflower</li>
  <li>sea lettuce</li>
  <li>kohlrabi</li>
  <li>amaranth</li>
</ul></textarea
>

</body>
</html>